<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>扩展实例方法</title>
  <script src="../assets/js/vue.min.js"></script>
</head>
<body>
  <h1>扩展实例方法</h1>
  <hr>
  <div id="app">
  </div>
  <button onclick="unbind()">unbind</button>
  <button onclick="reload()">reload</button>
  <button onclick="nextTick()">nextTick</button>
  <script>
    function unbind() {
      vm.$destroy();
    }
    function reload() {
      vm.$forceUpdate();
    }
    function nextTick() {
      // 在外部改变扩展内的数据
      vm.a = 'updated aaa';
      // $.nextTick()类似updated钩子函数，都是在改变数据后执行，这里先执行钩子函数再执行实例的$nextTick()
      vm.$nextTick(function () {
        console.log('nextTick');
      })
    }
    var vueExtend = Vue.extend({
      template: `<h4>实例扩展方法{{ a }}-{{ b }}-{{ c }}</h4>`,
      data: function () { 
        return {
          a: 'aaa'
        }
       },
      props: ['b', 'c'],
      // 扩展中也可以使用钩子函数
      mounted: function () { 
        console.log('mounted');
      },
      updated: function () {
        console.log('updated');
      },
      destroyed: function() {
        console.log('destroyed');
      }
    })
    // 扩展实例的template内容会覆盖#app整个标签,包括里面的内容
    var vm = new vueExtend({propsData: {b: 'bbb', c: 'ccc'}}).$mount('#app');
  </script>
</body>
</html>